<template>
  <el-scrollbar style="height: 100%" class="opration-container">
    <div class="opration">
      <div class="oprationLeft">
        <el-button type="primary" size="small" @click="handleAllSet">多终端设置</el-button>
      </div>
      <div class="oprationRight">
        <el-form :inline="true" size="small" :model="queryData">
          <el-form-item>
            <el-select
              v-model="queryData.queryType"
              :placeholder="$t('全部选项')"
              clearable
              style="width: 100px"
              @clear="doClearQuery"
            >
              <el-option
                v-for="(item, index) in searchItemData"
                :key="index"
                :label="$t(item.name)"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input
              :placeholder="$t('请输入关键词搜索')"
              v-model="queryData.queryParam"
              clearable
              style="width: 160px"
            >
              <template slot="prepend"
                ><i class="iconfont icon-sousuo"
              /></template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <bs-search-button-icon @click.native="doList"></bs-search-button-icon>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </el-scrollbar>
</template>
<script>

export default {
    name: 'physicalSetScreenCondition',
    data() {
        return {
            searchForm: {},
            showItem: '',
            searchItemData: [
                { name: '全部选项', value: 0 },
                { name: '终端名称', value: 1 },
                { name: 'MAC地址', value: 2 },
                { name: '车牌号码', value: 3 },
                { name: '车辆编号', value: 4 },
                { name: '车辆线路', value: 5 },
                { name: '所属公司', value: 6 }
            ]
        }
    },
    mounted() {
        this.$nextTick(function() {
        })
    },
    props: {
        queryData: {
            default: {}
        }
    },
    methods: {
      // 查询
      doList() {
          this.queryData.page = 1
          this.$eventBus.$emit('doList', this.queryData)
      },
      // 点击清除下拉选择条件
      doClearQuery() {
        this.$set(this.queryData, 'queryType', 0)
        this.$set(this.queryData, 'queryParam', '')
      },
      handleAllSet() {
        this.$emit('allSet')
      }
    }
}
</script>